<!-- 环境监测 -->
<template>
    <div class="environment">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">环境监测</span>
        </div>
        <el-date-picker v-model="searchDay" type="date" placeholder="" class="searchDate" :clearable="false" />
        <div class="linChart" ref="chartContainer"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

let searchDay = ref("");

const chartData = reactive({
    data: [
        { date: '08:00', value: 50, value2: 10 },
        { date: '10:00', value: 210, value2: 15 },
        { date: '12:00', value: 200, value2: 18 },
        { date: '14:00', value: 150, value2: 20 },
        { date: '16:00', value: 130, value2: 30 },
        { date: '18:00', value: 160, value2: 35 },
        { date: '20:00', value: 100, value2: 8 },
        { date: '22:00', value: 120, value2: 44 },
    ] as any,
})

const chartContainer = ref(null);
let myChart = null as any;

const updateChart = () => {
    if (!chartContainer.value) return;

    // Initialize the chart
    myChart = echarts.init(chartContainer.value);

    // Define chart options
    const option = {
        legend: {
            left: "3%",
            top: 10,
            // data: ["发电量", "上网电量"],
            itemStyle: {
                color: "rgba(255, 255, 255, 1)"
            },
            textStyle: {
                fontWeight: "lighter",
                color: "rgba(255, 255, 255, 1)",
                fontSize: 12,
            }
        },
        grid: {
            top: '30%',//生成的echarts图片和顶部的距离
            bottom: '6%',//echarts图片和底部的距离
            left: '6%',//echarts图片和左边的距离
            right: '5%',//echarts图片和右边的间距,
            containLabel: true,//当containLabel:为ture时，以上设置生效
        },
        xAxis: {
            type: 'category',
            data: chartData.data.map((item: any) => item.date),
            axisTick: { show: false },
            name: '',
            nameTextStyle: {
                color: '#FFFFFF',
                fontWeight: "normal",
                fontSize: 8,
                verticalAlign: "top",
                lineHeight: 27
            },
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)"
            },

        },
        yAxis: [
            {
                type: 'value',
                // boundaryGap: true,
                axisTick: { show: false },
                name: '单位:Pa',
                nameTextStyle: {
                    color: '#FFFFFF',
                    fontSize: 10,
                    align: "right",
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.1)"
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.3)"
                    }
                },
                axisLabel: {
                    show: true,
                    fontSize: 10,
                    color: "rgba(255, 255, 255, 1)"
                }
            },
            {
                type: 'value',
                // boundaryGap: true,
                axisTick: { show: false },
                name: '单位:℃',
                nameTextStyle: {
                    color: '#FFFFFF',
                    fontSize: 10,
                    align: "left",
                    padding: [0, 0, 0, -8]
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.1)"
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.3)"
                    }
                },
                axisLabel: {
                    show: true,
                    fontSize: 10,
                    color: "rgba(255, 255, 255, 1)"
                }
            },
        ],
        tooltip: {
            trigger: 'axis'
        },
        series: [{
            data: chartData.data.map((item: any) => item.value),
            name: '负压',
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
                color: '#C88227'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [  // 渐变颜色
                        {
                            offset: 0,
                            color: 'rgba(200, 130, 39, 0.5)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(200, 130, 39, 0.00)',
                        },
                    ],
                    global: false,
                },
            },

        },
        {
            data: chartData.data.map((item: any) => item.value2),
            name: '温度',
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
                color: '#00BBDB'
            },
            yAxisIndex: 1,
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [  // 渐变颜色
                        {
                            offset: 0,
                            color: 'rgba(0, 187, 219, 0.50)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(0, 187, 219, 0.00)',
                        },
                    ],
                    global: false,
                },
            },

        }]

    };

    // Set optionslinChart
    myChart.setOption(option);

    // Handle resize
    window.addEventListener('resize', () => {
        myChart.resize();
    });
};

// Watch for data changes and update the chart
watch(() => chartData.data, () => {
    if (myChart) {
        updateChart();
    }
}, { immediate: true });

onMounted(() => {
    updateChart();
});
</script>

<style lang="scss" scoped>
.environment {
    position: absolute;
    width: vh(421);
    height: vh(302);
    right: vh(21);
    top: vh(61);
    background: url(@/assets/images/home/left2.png) no-repeat;
    background-size: 100% 100%;
    z-index: 999;

    .boxTitle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: vh(8);

        img {
            width: vh(15);
            height: vh(17);
        }

        .title {
            margin-left: vh(6);
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: vh(16);
            color: #00E3FE;
            line-height: vh(16);
        }
    }

    :deep(.searchDate) {
        position: absolute;
        width: vh(100);
        height: vh(22);
        top: vh(37);
        right: vh(14);
        // background: rgba(11, 122, 155, 0.5);
        border-radius: vh(3);
        border: vh(1) solid #00BDE5;
        box-shadow: none;
        z-index: 9999;

    }

    :deep(.el-date-editor) {
        border: none;
        height: vh(22);
        .el-input__wrapper {
            height: vh(22);
        }
    }

    .linChart {
        width: 100%;
        height: vh(270);
    }
}
</style>
